<section class="content-header">
    <h1>&nbsp;</h1>
    <ol class="breadcrumb">
        <li><a href="javascript:void(0);"><i class="fa fa-dashboard"></i>
            云链监控</a></li>
        <li class="active">集群状态监控</li>
    </ol>
</section>
<!-- Main content -->
<section class="content" >

    <div class="row"  ng-controller="overviewCtrl" >
        <div class="col-xs-12">
            <div class="box">
               <div class="box-header">
                    <form class="form-horizontal  " style="margin-top :20px;">
                        <div class="form-group"  >
                            <a id="btnExpand" class="btn btn-default" style="margin-left: 20px;" data-ng-click="toggleExpand('btnExpand')" >
                                <span class="glyphicon glyphicon-collapse-down"></span>
                                <font>收起所有</font>
                            </a>
                            <label  class="checkbox-inline" style="margin-bottom: 6px;">数据中心</label>
                            <label  class="checkbox-inline" style="margin-bottom: 6px;" data-ng-repeat="area in areas track by $index">
                                <input type="radio"  name="area"  class="radio-inline"  value="{{area.code}}" ng-value="area.code"  data-ng-click="areaClick(this )"  > {{area.code}}
                            </label >
                            <select data-ng-model="refreshTime" id="refreshTime" class="input-sm"
                                    name="refreshTime" ng-change="changeRefreshTime()"
                                    style="float: right;margin-right:20px;" ng-options="option.value as option.label for option in $root.configs.monitorRefreshCycle">
                            </select>
                            <select data-ng-model="$root.configs.defaultDataAge"
								class="input-sm" ng-change="$root.chartRangeChange()"
								style="float: right; margin-right: 10px;"
								ng-options="option.age as option.label for option in $root.configs.monitorChartRange">
							</select>
                        </div>

                    </form>
               </div>
                <!-- /.box-header -->
                <div class="box-body" style=" ">
                    <div class="panel-group" id="accordion">
                        <div class="panel panel-default"  >
                            <div class="panel-heading"  data-ng-click="toggle('panelChartQueueMsg')">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" >
                                        Queued Message
                                    </a>
                                </h4>
                            </div>
                            <div id="panelChartQueueMsg" class="panel-collapse collapse in">
                                <div class="panel-body">
                                    <div id="chartQueueMsg" style="padding: 0 0 0 0;margin: 0 10px 0 0 ;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading" data-ng-click="toggle('panelChartMsgRate')">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" >
                                        Message Rate
                                    </a>
                                </h4>
                            </div>
                            <div id="panelChartMsgRate" class="panel-collapse collapse in">
                                <div class="panel-body">
                                    <div id="chartMsgRate" style="padding: 0 0 0 0;margin: 0 10px 0 0 ;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading" data-ng-click="toggle('panelGlobalCounts')">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" >
                                        Global Counts
                                    </a>
                                </h4>
                            </div>
                            <div id="panelGlobalCounts" class="panel-collapse collapse in">
                                <div class="panel-body">
                                     <a class="btn btn-default" style="width: 150px;margin-right: 20px;" href="#/app/monitor/connections">
                                         Connections
                                         <span class="badge pull-right" style="background-color: gray;margin:2px 4px;">{{globalCounts.connections}}</span>
                                     </a>
                                    <a class="btn btn-default" style="width: 150px;margin-right: 20px;" href="#/app/monitor/channels">
                                        Channels
                                        <span class="badge pull-right" style="background-color: gray;margin:2px 4px;">{{globalCounts.channels}}</span>
                                    </a>
                                    <a class="btn btn-default" style="width: 150px;margin-right: 20px;" href="#/app/monitor/exchanges">
                                        Exchanges
                                        <span class="badge pull-right" style="background-color: gray;margin:2px 4px;">{{globalCounts.exchanges}}</span>
                                    </a>
                                    <a class="btn btn-default" style="width: 150px;margin-right: 20px;" href="#/app/monitor/queues">
                                        Queues
                                        <span class="badge pull-right" style="background-color: gray;margin:2px 4px;">{{globalCounts.queues}}</span>
                                    </a>
                                    <a class="btn btn-default" style="width: 150px;margin-right: 20px;" >
                                        Consumers
                                        <span class="badge pull-right" style="background-color: gray;margin:2px 4px;">{{globalCounts.consumers}}</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading" data-ng-click="toggle('panelNode')">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" >
                                        Node
                                    </a>
                                </h4>
                            </div>
                            <div id="panelNode" class="panel-collapse collapse in">
                                <div class="panel-body">
                                     <div class="row" style="margin:0 0 0 0;" >
                                        <!--<h3>Node&nbsp;:&nbsp;{{node['name']}}</h3>-->
                                         <!--<div style="margin :0 0 5px 5px ;font-weight: bold;">Node&nbsp;:&nbsp;{{node['name']}}</div>-->
                                            <table class="table table-bordered" style="text-align:center;" >
                                                <thead style="background-color: #eee; ">
                                                    <tr  >
                                                        <th style="text-align:center; width: 120px;">Node name</th>
                                                        <th style="text-align:center; width: 120px;">Is running</th>
                                                        <th style="text-align:center; width: 120px;">File descriptors</th>
                                                        <th style="text-align:center;width: 120px;">Socket descriptors</th>
                                                        <th style="text-align:center;width: 120px;">Erlang processes</th>
                                                        <th style="text-align:center;width: 120px;">Memory</th>
                                                        <th style="text-align:center;width: 120px;">Disk space</th>
                                                        <th style="text-align:center;width: 120px;">Info</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                <tr data-ng-repeat="node in nodes track by $index" data-ng-click="toNodePage(node.name)">
                                                    <td>
                                                        <a>{{node['name']}}</a>
                                                    </td>
                                                    <td data-ng-bind-html="node['running'] | runningState">
                                                    </td>
                                                    <td>
                                                         {{node['fd_used']}}
                                                        <br>
                                                        {{node['fd_total']}}&nbsp;available
                                                    </td>
                                                    <td>{{node['sockets_used']}}<br>
                                                        {{node['sockets_total']}}&nbsp;available
                                                    </td>
                                                    <td>{{node['proc_used']}}<br>
                                                        {{node['proc_total']}}&nbsp;available
                                                    </td>
                                                    <td>{{node['mem_used'] | capacityFormat}}<br>
                                                        {{node['mem_limit'] | capacityFormat}}&nbsp;high&nbsp;watermark
                                                    </td>
                                                    <td>{{node['disk_free'] | capacityFormat}}<br>
                                                        {{node['disk_free_limit'] | capacityFormat}}&nbsp;low&nbsp;watermark
                                                    </td>
                                                    <td>{{node['type'] == 'disc'?'Disc':'RAM'}}&nbsp;
                                                        {{node | countPlugins}}&nbsp;
                                                        {{node['name']==overview['statistics_db_node']?'Stats':''}}
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                     </div>
                                     <!--<div class="row">
                                         <div style="margin :0 0 5px 5px ;padding-bottom: 3px;border-bottom:solid 1px #cccccc;">Paths</div>
                                        <div style="margin-top:10px;">
                                            <div style="height:28px;float:left;text-align: right; width: 160px;padding:5px 10px 0px 0;font-weight:bold;border-right:solid 1px #cccccc">
                                                Config files
                                            </div>
                                            <div style=" float:left;padding:5px 0px 0px 10px;" data-ng-repeat="fileName in node['config_files']" >
                                                {{fileName}}
                                            </div>
                                            <div style="clear: both;"></div>
                                            <div style="height:28px;float:left;text-align: right; width: 160px;padding:5px 10px 0px 0;font-weight:bold; border-right:solid 1px #cccccc">
                                                Database directory
                                            </div>
                                            <div style="padding :5px 0 0 10px;float:left;">
                                                {{node['db_dir']}}
                                            </div>
                                            <div style="clear: both;"></div>
                                            <div style="height:28px;float:left;text-align: right; width: 160px;padding:5px 10px 0px 0;font-weight:bold; border-right:solid 1px #cccccc">
                                                Log file
                                            </div>
                                            <div style="padding :5px 0 0 10px;float:left;">
                                                {{node['log_file']}}
                                            </div>
                                            <div style="clear: both;"></div>
                                            <div style="height:28px;float:left;text-align: right; width: 160px;padding:5px 10px 0px 0;font-weight:bold;border-right:solid 1px #cccccc">
                                                SASL log file
                                            </div>
                                            <div style="padding :5px 0 0 10px;float:left;">
                                                {{node['sasl_log_file']}}
                                            </div>
                                            <div style="clear: both;"></div>
                                        </div>
                                     </div>-->
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading"  data-ng-click="toggle('panelPortsAndContexts')">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" >
                                        Ports and Contexts
                                    </a>
                                </h4>
                            </div>
                            <div id="panelPortsAndContexts" class="panel-collapse collapse in">
                                <div class="panel-body">
                                    <div style="margin :0 0 5px 5px ;padding-bottom: 3px;border-bottom:solid 1px #cccccc;">Listening ports</div>
                                    <div style="margin :10px 0 0 5px;">
                                        <table class="table table-bordered table-hover" style="width: 450px;">
                                            <thead style="background-color: #eee; ">
                                            <tr>
                                                <th>Protocol</th>
                                                <th>Bound to</th>
                                                <th>Port</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr data-ng-repeat="listener in overview['listeners']">
                                                <td>{{listener['protocol']}}</td>
                                                <td>{{listener['ip_address']}}</td>
                                                <td>{{listener['port']}}</td>
                                            </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                    <div style="margin :0 0 5px 5px ;padding-bottom: 3px;border-bottom:solid 1px #cccccc;">Web contexts</div>
                                    <div style="margin :10px 0 0 5px;">
                                        <table class="table table-bordered table-hover" style="width: 450px;">
                                            <thead style="background-color: #eee; ">
                                            <tr>
                                                <th>Context</th>
                                                <th>Bound to</th>
                                                <th>Port</th>
                                                <th>SSL</th>
                                                <th>Path</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr data-ng-repeat="context in overview['contexts']">
                                                <td>{{context['description']}}</td>
                                                <td>{{context.ip != undefined ? context.ip : "0.0.0.0"}}</td>
                                                <td>{{context['port']}}</td>
                                                <td ng-bind-html="context['ssl'] | fmtBoolean"> </td>
                                                <td>{{context['path']}}</td>
                                            </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>

</section>